/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-01-28 17:51:11
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  Text,
  TouchableOpacity,
  PixelRatio,
} from 'react-native';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  fontColorDeepRed,
  fontColorBlack,
  fontColorLightGray,
  fontColorCoffee,
  screenWidth,
  px2dp,
  screenHeight,
  splitLineColorLightGray,
  fontColorSecDeepGray,
  mainBgColorBlack,
  fontColorLightCoffee,
} from '../../../../../common/styles';
import { Button, msg } from '../../../../../common';
import { returnIntegral } from '../../../../../image';

const { Submit } = Button;

export default class SelectItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static defaultProps ={
    style: {}
  }

  componentDidMount() {}

  render() {
    const { name, type, value, activeVal, style } = this.props;
    return (
      <TouchableOpacity
        activeOpacity={1}
        style={[
          styles.selectItem,
          style,
          activeVal.includes(value)
            ? { backgroundColor: fontColorLightCoffee, borderWidth: 1 / PixelRatio.get(), borderColor: '#BA914A' }
            : {},
        ]}
        onPress={() => {
          this.onChange();
        }}
      >
        <Text
          style={{
            fontSize: px2dp(28),
            color:
            activeVal.includes(value) ? fontColorCoffee : fontColorSecDeepGray,
          }}
        >
          {name}
        </Text>
      </TouchableOpacity>
    );
  }

  onChange = () => {
    const { maxLength, onChange, type, value, activeVal } = this.props;
    // 大于1 多选
    if (maxLength > 1) {
      // 如果包含，再次点击取消选中
      if (activeVal.includes(value)) {
        activeVal.splice(activeVal.indexOf(value), 1);
        onChange(type, activeVal);
      } else {
        activeVal.push(value);
        onChange(type, activeVal);
      }
    } else {
      onChange(type, value);
    }
  }
}
const styles = StyleSheet.create({
  selectItem: {
    width: px2dp(218),
    height: px2dp(72),
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(8),
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: px2dp(16),
    marginRight: px2dp(10),
  },
});
